<template>
  <div class="sql-web2-container">
    <!-- 头部 -->
    <header class="sql-web2-header">
      <div class="header-content">
        <div class="header-logo-container">
          <div class="logo-icon-container">
            <i class="fa fa-shield text-white text-xl"></i>
          </div>
          <div>
            <h1 class="site-title">进阶SQL注入靶场</h1>
            <p class="site-subtitle">http://localhost:8080/new_env/flaw_sql2/99d135zs541.php</p>
          </div>
        </div>
        <div class="header-badge-container">
          <div class="header-badge">
            进阶练习 · 绕过过滤
          </div>
        </div>
      </div>
    </header>

    <!-- 主内容区 -->
    <main class="main-content">
      <div class="content-wrapper">
        <!-- 页面标题和说明 -->
        <div class="page-header">
          <h2 class="page-title">SQL注入过滤绕过练习</h2>
          <p class="page-description">
            本练习包含带有基础过滤机制的登录表单（过滤空格和关键字），尝试使用各种绕过技术获取FLAG。
          </p>
        </div>

        <!-- 登录表单卡片 -->
        <div class="login-form-container">
          <div class="form-header">
            <h3 class="form-title">
              <div class="form-icon-container">
                <i class="fa fa-lock text-blue-400"></i>
              </div>
              管理员登录
            </h3>
          </div>

          <!-- 登录表单 -->
          <form @submit.prevent="submitLogin">
            <div class="form-group">
              <label for="username" class="form-label">用户名</label>
              <div class="input-wrapper">
                <div class="input-icon">
                  <i class="fa fa-user text-gray-500"></i>
                </div>
                <input
                    type="text"
                    id="username"
                    v-model="username"
                    class="form-input"
                    placeholder="尝试注入字符串"
                >
              </div>
            </div>

            <div class="form-group">
              <label for="password" class="form-label">密码</label>
              <div class="input-wrapper">
                <div class="input-icon">
                  <i class="fa fa-key text-gray-500"></i>
                </div>
                <input
                    type="password"
                    id="password"
                    v-model="password"
                    class="form-input"
                    placeholder="可输入任意内容或留空"
                >
              </div>
            </div>

            <div class="form-group">
              <button
                  type="submit"
                  class="submit-button"
              >
                <i class="fa fa-sign-in"></i>
                <span>登录验证</span>
              </button>
            </div>
          </form>

          <!-- 过滤日志 -->
          <div v-if="filterLog.length > 0" class="filter-log-container">
            <div class="filter-log-header">
              <i class="fa fa-filter text-yellow-500 mr-2"></i>
              <p>过滤系统日志</p>
            </div>
            <ul class="filter-log-list">
              <li v-for="(log, index) in filterLog" :key="index" class="filter-log-item">
                {{ log }}
              </li>
            </ul>
          </div>

          <!-- 执行的SQL语句显示 -->
          <div v-if="lastSql" class="sql-display-container">
            <div class="sql-display-header">
              <i class="fa fa-code text-gray-500 mr-2 text-sm"></i>
              <p>执行的SQL语句（过滤后）</p>
            </div>
            <p class="sql-code">
              {{ lastSql }}
            </p>
          </div>

          <!-- 结果显示区域 -->
          <div v-if="showResult" class="result-container">
            <!-- 登录成功 - 获取FLAG -->
            <div v-if="result.success" class="success-result">
              <div class="success-content">
                <div class="success-icon-container">
                  <i class="fa fa-flag text-blue-400 text-2xl"></i>
                </div>
                <h4 class="success-title">恭喜！成功绕过过滤并获取FLAG！</h4>
                <div class="flag-display">
                  {{ result.flag }}
                </div>
                <p class="success-message">
                  <i class="fa fa-check-circle"></i>
                  <span>你成功绕过了SQL注入过滤机制！</span>
                </p>
              </div>
            </div>

            <!-- 登录失败 -->
            <div v-else class="error-result">
              <div class="error-content">
                <div class="error-icon-container">
                  <i class="fa fa-exclamation-circle text-red-500"></i>
                </div>
                <div>
                  <h4 class="error-title">登录失败</h4>
                  <p class="error-message">{{ result.error }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 提示区域 -->
        <div class="hints-container">
          <div class="hints-header">
            <div class="hints-icon-container">
              <i class="fa fa-lightbulb-o text-yellow-400"></i>
            </div>
            <h3 class="hints-title">绕过技术提示</h3>
          </div>

          <div class="hints-content">
            <div class="hints-section">
              <h4 class="hints-section-title">过滤机制:</h4>
              <ul class="hints-list">
                <li class="hint-item">过滤空格字符</li>
                <li class="hint-item">检测并拦截常见SQL关键字（OR, UNION等）</li>
              </ul>
            </div>

            <div class="hints-section">
              <h4 class="hints-section-title">尝试这些绕过方法:</h4>
              <ul class="hints-list">
                <li class="hint-item">空格绕过技术、注释绕过技术、字符转义绕过技术</li>
                <li class="hint-item">双写绕过技术、URL 编码绕过等等</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </main>


  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      password: '',
      showResult: false,
      result: {},
      lastSql: '',
      filterLog: []
    };
  },
  methods: {
    // 模拟过滤机制
    applyFilters(input) {
      this.filterLog = [];
      let filteredInput = input;

      // 1. 检测并过滤空格
      if (filteredInput.includes(' ')) {
        filteredInput = filteredInput.replace(/ /g, '');
        this.filterLog.push('检测到空格，已移除所有空格字符');
      }

      // 2. 检测关键字并尝试过滤
      const keywords = ['OR', 'UNION', 'SELECT', 'FROM', 'WHERE', 'AND'];
      // eslint-disable-next-line no-unused-vars
      let keywordDetected = false;

      keywords.forEach(keyword => {
        // 检测各种大小写组合的关键字
        const regex = new RegExp(keyword, 'i');
        if (regex.test(filteredInput)) {
          keywordDetected = true;

          // 尝试简单替换关键字
          const replaceRegex = new RegExp(keyword, 'gi');
          const originalCount = (filteredInput.match(replaceRegex) || []).length;
          filteredInput = filteredInput.replace(replaceRegex, '');

          this.filterLog.push(`检测到关键字 "${keyword}"，已尝试过滤 (共${originalCount}处)`);
        }
      });

      // 3. 检测双写关键字
      const doubleKeywords = ['OorR', 'Uunniioonn', 'Sseeelleecctt'];
      doubleKeywords.forEach(keyword => {
        if (filteredInput.includes(keyword)) {
          this.filterLog.push(`检测到可能的双写绕过尝试: "${keyword}"`);
        }
      });

      // 4. 检测内联注释
      if (filteredInput.includes('/*!') && filteredInput.includes('*/')) {
        this.filterLog.push('检测到可能的内联注释绕过尝试');
      }

      return filteredInput;
    },

    // URL解码
    decodeUrl(input) {
      try {
        const decoded = decodeURIComponent(input);
        if (decoded !== input) {
          this.filterLog.push('检测到URL编码内容，已自动解码');
        }
        return decoded;
      } catch (e) {
        return input;
      }
    },

    submitLogin() {
      this.showResult = true;
      this.filterLog = [];

      // 处理用户名输入：先解码，再应用过滤
      let processedUsername = this.username;
      processedUsername = this.decodeUrl(processedUsername);
      const filteredUsername = this.applyFilters(processedUsername);

      // 处理密码（简单过滤）
      const filteredPassword = this.applyFilters(this.password);

      // 构建最终执行的SQL（模拟）
      this.lastSql = `SELECT * FROM users WHERE username = '${filteredUsername}' AND password = '${filteredPassword}'`;

      // 判断绕过是否成功（检测多种绕过模式）
      const bypassPatterns = [
        // 空格绕过
        /'OR'1'='1'#/,
        /'OR'1'='1'%23/,
        /'\/\*\*\/OR\/\*\*\/'1'='1'--/,

        // 大小写绕过
        /'[oO][rR]'1'='1'/,

        // 双写绕过
        /'OorR'1'='1'/,

        // 内联注释
        /'\/\*\\!OR\*\/'1'='1'/
      ];

      // 检查是否有任何一种绕过模式匹配
      const isBypassSuccess = bypassPatterns.some(pattern => {
        return pattern.test(filteredUsername);
      });

      // 正常管理员登录（用于对比）
      const isNormalLogin = filteredUsername === 'admin' && filteredPassword === 'supersecret';

      if (isBypassSuccess) {
        // 绕过成功，返回FLAG
        this.result = {
          success: true,
          flag: 'FLAG-『绕过注入』'
        };
      } else if (isNormalLogin) {
        // 正常登录成功
        this.result = {
          success: true,
          flag: 'FLAG--『正常登录』'
        };
      } else {
        // 登录失败
        let errorMsg = '用户名或密码错误';
        if (this.filterLog.length > 0) {
          errorMsg += '，检测到可能的注入尝试并已过滤';
        }
        this.result = {
          success: false,
          error: errorMsg
        };
      }
    }
  }
};
</script>

<style scoped lang="css" src="@/assets/styles/sqlweb2.css"></style>
